import React from 'react';
import {
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import { TableList, PlaceHolderView, BaseComponent, NavBar } from '../wedgets';
import { Fetch } from '../lib';

export default class AreaWeathers extends BaseComponent {
  static navigationOptions = ({ navigation }) => ({
    header: <NavBar
      title={navigation.state.params.title}
      navigation={navigation}
      enableBackBtn={true}
      backColor={'#fff'}
      titleColor={'#fff'} />
  })

  componentDidMount() {

  }

  renderRow = ({ item, index }) => {
    console.log('======000', item)
    const { navigation } = this.props;
    return <TouchableOpacity
    onPress={()=>{
      //由于本Component继承自BaseComponent所以可以直接调用BaseComponent的方法
      this.goToComponent('WeatherDetail',{
        //这里可以传递参数,这里我们把省份编码传递到下一个界面
        area_code:navigation.state.params.area_code+Object.keys(item)[0],
        title:`${navigation.state.params.title}天气详情`
      });
    }}
     style={{height:100,borderBottomColor:'#F2F2F2',borderBottomWidth:PX_LINE,justifyContent:'center'}}>
      <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:SCREEN_W,paddingHorizontal:13}}>
        <Text style={{fontSize:14,color:'#999'}}>编码：{navigation.state.params.area_code+Object.keys(item)[0]}</Text>
        <Text style={{fontSize:18,color:'#66B8F5',marginLeft:13}}>天气详情 ></Text>
      </View>

      <Text style={{fontSize:14,color:'#999',marginTop:20,marginLeft:13}}>城市：{item[Object.keys(item)[0]]}</Text>
    </TouchableOpacity>
  }

  //list请求数据实现入口,这里请求城市列表
  fetchData = (page, startFetch, abortFetch) => {
    //模仿数据下拉加载
    let area_code = this.props.navigation.state.params.area_code;
    this.Loading();
    new Fetch({
      //typescript写法直接给字符串插入参数http://www.weather.com.cn/data/sk/101010100.html
      url: `http://www.weather.com.cn/data/city3jdata/station/${area_code}.html`,
      method: 'get',
    }).dofetch().then((res) => {
      this.UnLoading();
      console.log('天气信息 =====>', res);
      let pros = [];
      for(let i in res){
        pros.push({[i]:res[i]});
      }
      
      startFetch(pros, 1000)//下面的列表组件关闭了分页pagination这里直接加载1000条
    }).catch((err) => {
      this.UnLoading();
      abortFetch();
    })
    // setTimeout(() => {
    //   startFetch([1, 2, 3], 10)
    // }, 3000)

  }

  render() {
    const { navigation } = this.props;
    // navigation.setParams({
    //   visiable:false
    // });
    return (
      <View style={{ flex: 1 }}>
        <TableList
          ref={list => this.list = list}
          style={{ backgroundColor: 'white' }}
          onFetch={this.fetchData}
          renderItem={this.renderRow}
          keyExtractor={item => item.id}
          pagination={false}
          initialNumToRender={10}
          paginationType={'value'}
          PaginationFetchingView={() => {
            return [
              <PlaceHolderView type={'video'} key={'top'} />,
              <PlaceHolderView type={'video'} key={'center'} />,
              <PlaceHolderView type={'video'} key={'bottom'} />
            ];
          }}
        />
      </View>

    );
  }
}



